@charset "utf-8";

// 定义函数 rpx
@function rpx($value) {
  @return $value * 1rpx;
}

.container, page {
  background: #fff;
}

.coupon-list {
  padding: rpx(20);

  .coupon-item {
    position: relative;
    overflow: hidden;
    margin-bottom: rpx(22);
    //box-shadow: 2px 3px 6px #d0d0d0;
    .item-wrapper {
      width: 100%;
      display: flex;
      background: #fff;
      border-radius: rpx(8);
      color: #fff;
      height: rpx(180);

      // 角标
      .coupon-type {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        width: rpx(128);
        padding: 3px 0;
        background: #a771ff;
        font-size: rpx(20);
        text-align: center;
        color: #ffffff;
        transform: rotate(45deg);
        transform-origin: rpx(64) rpx(64);
      }

      // 蓝色
      &.color__blue {
        background: linear-gradient(-125deg, #57bdbf, #2f9de2);
      }

      // 红色
      &.color__red {
        background: linear-gradient(-128deg, #ff6d6d, #ff3636);
        .coupon-type {
          //background: #ff6c00;
        }
      }

      // 紫色
      &.color__violet {
        background: linear-gradient(-113deg, #ef86ff, #b66ff5);
        .coupon-type {
          background: #55b5ff;
        }
      }

      // 黄色
      &.color__yellow {
        background: linear-gradient(-141deg, #f7d059, #fdb054);
        .coupon-type {
          //background: #ff6262;
        }
      }

      // 灰色
      &.color__gray {
        background: linear-gradient(-113deg, #bdbdbd, #a2a1a2);
        //background: #bdbdbd;
        .coupon-type {
          background: #9e9e9e;
        }
      }
      .content {
        flex: 1;
        padding: rpx(30) rpx(20);
        border-radius: 8px 0 0 8px;

        .title {
          font-size: rpx(38);
        }

        .bottom {
          .time {
            font-size: rpx(24);
            //line-height: rpx(22);
          }
          .receive {
            height: rpx(46);
            width: rpx(122);
            line-height: rpx(46);;
            text-align: center;
            border: 1px solid #fff;
            border-radius: rpx(30);
            color: #fff;
            font-size: rpx(24);
            &.state {
              border: none;
            }
          }
        }

      }

      .tip {
        position: relative;
        flex: 0 0 32%;
        text-align: center;
        border-radius: 0 8px 8px 0;

        .money {
          font-weight: bold;
          font-size: rpx(52);
        }

        .pay-line {
          font-size: rpx(22);
        }
      }

      // 中间缺口线
      .split-line {
        position: relative;
        flex: 0 0 0;
        border-left: rpx(4) solid #fff;
        margin: 0 5px 0 3px;
        background: #fff;
      }

      .split-line:before, .split-line:after {
        content: '';
        position: absolute;
        width: 12px;
        height: 6px;
        background: #f7f7f7;
        left: -7px;
        z-index: 1;
      }

      .split-line:before {
        border-radius: 0 0 8px 8px;
        top: 0;
      }

      .split-line:after {
        border-radius: 8px 8px 0 0;
        bottom: 0;
      }

    }
  }

}
